<template>
  <div class="order-evaluation">

    <!-- 概括评价 -->
    <div class="general">
      <div class="stars">
        <div class="title">企业评价</div>
        <div class="item">
          <p>服务评价</p>
          <Rate
            v-model="service_score"
            show-text
            :texts="starTexts"
            text-color="#E48B2C"
          />
        </div>
        <div class="item">
          <p>交期评价</p>
          <Rate
            v-model="days_score"
            show-text
            :texts="starTexts"
            text-color="#E48B2C"
          />
        </div>
      </div>

      <div class="evaluation" style="margin-top:20px;">
        <Input maxlength="500"  rows='3' resize='none' show-word-limit type="textarea" placeholder="评价内容" v-model="comment" />
      </div>
    </div>

    <!-- 详细评价 -->
    <div class="detailed">
      <div class="item" v-for="(item, index) in order.orderList" :key="index">
        <div class="img-and-name">
          <img v-if="item.product&&item.product[0]" :src="item.product[0].image"/>
          <div v-if="item.product&&item.product[0]" class="name">{{ item.product[0].store_name }}</div>
        </div>
        <div class="star">
          <p>产品评价</p>
          <Rate
            v-model="item.product_score"
            show-text
            :texts="starTexts"
            text-color="#E48B2C"
          />
        </div>
        <div class="evaluation">
          <Input
            rows='3'
            type="textarea"
            placeholder="评价内容"
            maxlength="500"
            show-word-limit
            resize='none'
            v-model="item.comment"
          />
        </div>
      </div>
    </div>

    <div class="btn">
      <MButton :loading='isSubmit' style="width:100%" class="submit" @click='submitFn'>提交</MButton>
    </div>
  </div>
</template>

<script>
import { Input, Rate } from "element-ui";
import { myOrderDetail,replyOrder } from "@/request/api"
import MButton from "@/components/common/m-button/MButton"

export default {
  name: "OrderEvaluation",
  components: { Rate, Input,MButton },
  data() {
    return {
      orderId: "",
      order: {},
      starTexts: ["1分", "2分", "3分", "4分", "5分"],
      service_score: 5,
      days_score: 5,
      comment: "",
      isSubmit:false
    }
  },
  created() {
    this.orderId = this.$route.query.id
     myOrderDetail(this.orderId).then((res) => {
        this.$toastVant.clear()
        const resData = res.data || {}
        resData.orderList = resData.orderList||[]
        resData.orderList.forEach(item => {
          item.product_score = 5
        })
        this.order = resData
      }).catch(err => {
        this.$message.error(err.message)
      })
  },
  methods: {
    async submitFn() {
      const requestFormData =  {
        mer_id:this.order.merchant?.mer_id||'',
        group_order_id:this.order.group_order_id,
        product_id_list:'',
        service_score:this.service_score,
        days_score:this.days_score,
        comment:this.comment||'',
        product_data:this.order.orderList.map(item => {
          return {
            order_id:item.order_id,
            product_id:item.product_id,
            comment:item.comment||'',
            product_score:item.product_score
          }
        })
      }
      try {
        this.isSubmit = true
        const res = await replyOrder(requestFormData)
        this.$message.success(res.message||'评价成功！')
        this.$router.back()
      }finally {
        this.isSubmit = false
      }
    }
  },
};
</script>

<style lang="scss" scoped>
@import "~@/assets/style/common.scss";

.order-evaluation {
  border: solid 1px #eaeaea;
  padding: 15px 30px;
  margin-bottom: 200px;

  .title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;
  }

  .general {
    display: flex;
    margin-bottom: 40px;

    .stars,
    .evaluation {
      width: 50%;
    }

    .stars {
      display: flex;
      flex-direction: column;

      .item {
        margin-bottom: 15px;
        display: flex;

        p {
          margin-right: 10px;
        }
      }
    }
  }

  .detailed {
    margin-bottom: 40px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .item {
      display: inline-block;
      width: 47%;
      background-color: #f3f4f8;
      padding: 15px;
      margin: 15px 0;
      font-size: 16px;

      .img-and-name {
        display: flex;
        margin-bottom: 15px;

        img {
          width: 140px;
          height: 140px;
          margin-right: 15px;
          object-fit: cover;
        }
      }

      .star {
        display: flex;
        margin-bottom: 15px;

        p {
          margin-right: 15px;
        }
      }
    }
  }

  .btn {
    display: flex;
    justify-content: center;
    margin-bottom: 40px;

    .submit {
      
      display: flex;
      justify-content: center;
      ::v-deep .el-button {
        width: 100px;
      }
    }
  }
}
</style>
